﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Play.aspx.cs" Inherits="AiXiu.WebSite.Play" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>视频播放</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <link href="Content/mui/css/app.css" rel="stylesheet" />
    <link href="Content/common.css" rel="stylesheet" />
    <link href="Content/mui/css/icons-extra.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.16/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.16/aliplayer-min.js"></script>    
    <script src="Content/mui/js/mui.js"></script>
    <style>
        .page-content {
            height: 460px;
        }

            .page-content p {
                font-size: 10px;
            }

        .mui-card-content-inner {
            width: 146px;
            z-index: 71;
            position: absolute;
            bottom: 20px;
            background-color: #000;
            opacity: 0.5;
            color: #fff;
            margin-left: 20px;
            border-radius: 3px;
            padding: 8px;
        }

            .mui-card-content-inner p {
                color: #fff;
            }

        .mui-icon-location {
            font-size: 12px;
        }


        .other {
            z-index: 71;
            position: absolute;
            bottom: 0;
            right: 0;
        }



            .other p {
                color: #fff;
                text-align: center;
            }

            .other a {
                color: #fff;
                margin-left: 16px;
            }

        .avatar {
            width: 34px;
            height: 34px;
            border-radius: 42px;
        }


        .text-color-red {
            color: red;
        }

        .text-color-white {
            color: white;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">视频播放</h1>
        </header>
        <div class="mui-content" data-page="play">
            <div class="mui-card">
                <div class="mui-card-header mui-card-media" id="player-con"></div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p><%=Video.Headline%></p>
                        <p><i class="mui-icon mui-icon-location"></i><%=Video.Location%></p>
                    </div>
                    <div class="other">
                        <a href="Videos.aspx?id=<%=Author.Id%>" class="videos box-shadow-none bg-color-none external">
                            <img class="avatar" src="<%=Author.Avatar??"/imgs/avatar.jpg"%>" />
                        </a>
                        <p class="nickname text-color-white text-align-center no-margin-top"><%=Author.NickName%></p>
                        <a href="#" class="">
                            <i class="mui-icon-extra mui-icon-extra-heart-filled like-icon <%=IsLike?"text-color-red":"text-color-white"%>"></i>
                        </a>
                        <p class="like-count text-align-center no-margin-top"><%=LikeCount%></p>
                        <a href="Discuss.aspx?id=<%=VideoId%>">
                            <i class="mui-icon mui-icon-chat"></i>
                        </a>
                        <p class="discuss-count text-color-white text-align-center no-margin-top"><%=DiscussCount%></p>
                    </div>
                </div>
            </div>
        </div>
        <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script>
        // 播放视频
        <%--player = new Aliplayer({
            'id': 'player',
            'source': '<%=playInfo.PlayURL%>',      // 播放地址
                'width': '100%',
                'height': '100%',
                'autoplay': false,                       //自动播放
                //'autoplay': false,
                'isLive': false,
                'cover': '<%=playInfo.CoverURL%>',      // 封面地址
                'rePlay': false,
                'playsinline': true,
                'preload': true,
                'controlBarVisibility': 'hover',
                'useH5Prism': true
        });--%>
        var player = new Aliplayer({
            id: "player-con",
            source: "<%=playInfo.PlayURL%>",
            width: "100%",
            height: "500px",
            cover: '<%=playInfo.CoverURL%>',
            /* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
            autoplay: false,
            preload: false,
            isLive: false
        }, function (player) {
            console.log("The player is created");
        });

            // 
            var videoId = '<%=VideoId%>';
            var userId = '<%=UserId%>';
            var $likeIcon = $('.like-icon');
            var $likeCount = $('.like-count');
            $(".like-icon").click(function () {
                // 未点赞
                if ($likeIcon.hasClass('text-color-white')) {
                    $.post("/Handler/VideoLikeHandler.ashx", { videoId: videoId, userId: userId, action: 'add' }, function (data) {
                        data = $.parseJSON(data)
                        if (data.StatusCode == 0) {
                            $likeIcon.removeClass('text-color-white').addClass('text-color-red');
                            $likeCount.html(parseInt($('.other .like-count').html()) + 1);
                        } else {
                            alert(data.Message);
                        }
                    })
                }
                // 已点赞
                else {                    
                    $.post("/Handler/VideoLikeHandler.ashx", { videoId: videoId, userId: userId, action: 'remove' }, function (data) {
                        data = $.parseJSON(data)
                        if (data.StatusCode == 0) {
                            $likeIcon.removeClass('text-color-red').addClass('text-color-white');
                            $likeCount.html(parseInt($('.other .like-count').html()) - 1);
                        } else {
                            alert(data.Message);
                        }
                    })
                }
            })

</script>
    </form>
</body>
</html>
